<template>
	<view>
		<view class="register">
			<view class="img">
				<image src="../../static/login.png" mode=""></image>
			</view>
			<view class="register-put">
				<view class="username">
					<input type="number" placeholder="账号" v-model="username" maxlength="6" />
				</view>
				<view class="password">
					<input type="password" placeholder="密码" v-model="password" maxlength="10" />
				</view>
				<view class="register-btn">

					<button @tap="register"> 注册 </button>

				</view>

			</view>
		</view>
	</view>


</template>

<script>
	import service from '../../service.js';
	import mInput from '../../components/m-input.vue';
	export default {
		components: {
			mInput
		},
		data() {
			return {
				username: "",
				password: ""
			}
		},
		methods: {
			register() {
				/**
				 * 客户端对账号信息进行一些必要的校验。
				 * 实际开发中，根据业务需要进行处理，这里仅做示例。
				 */
				if (this.username.length < 6) {
					uni.showToast({
						icon: 'none',
						title: '账号最短为 6 个字符'
					});
					return;
				}
				if (this.password.length < 10) {
					uni.showToast({
						icon: 'none',
						title: '密码最短为 10 个字符'
					});
					return;
				}
				const data = {
					username: this.username,
					password: this.password
				}
				service.addUser(data);
				uni.showToast({
					title: '注册成功'
				});
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style>
	.img image {
		width: 200rpx;
		height: 200rpx;
		margin: 20rpx 280rpx 0 280rpx;
	}

	.register-put input {
		background-color: #d8d8d8;
		width: 80%;
		height: 100rpx;
		border-radius: 50rpx;
		margin: 20rpx auto;
		padding: 0 20rpx;
	}

	.register-btn button {
		background-color: #28d16c;
		width: 80%;
		margin: 60rpx auto;
	}
</style>